<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./04.Scroll animate.css" />
    <link rel="stylesheet" href="../css/common.css" />
  </head>

  <body>
    <img src="http://localhost/images/zks.jpg" alt="" />
    <div class="main">
      <div class="content">Content1</div>
      <div class="content">Content2</div>
      <div class="content">Content3</div>
      <div class="content">Content4</div>
      <div class="common right">Content5</div>
      <div class="common">Content6</div>
      <div class="common right">Content7</div>
      <div class="common">Content8</div>
      <div class="common right">Content9</div>
    </div>
    <script>
      const main = document.querySelector(".main");
      const content = document.querySelector(".content");
      const common = document.querySelector(".common");
      const contentWidth = content.offsetHeight;
      let offsetTop = main.children[1].offsetTop;
      let index = 0;
      document.addEventListener("scroll", function () {
        for (let j = 5; j < 10; j++) {
          if (window.pageYOffset > offsetTop) {
            if (j % 2 == 0) {
              main.children[j - 1].classList.add("left");
            } else if (j % 2 == 1) {
              main.children[j - 1].classList.add("rightactive");
            }
            offsetTop = main.children[j - 2].offsetTop;
            index = j;
          }
        }

        for (let i = index; i >= main.children.length - 4; i--) {
          if (window.pageYOffset < offsetTop) {
            if (i % 2 == 0) {
              main.children[i - 1].classList.remove("left");
            } else if (i % 2 == 1) {
              main.children[i - 1].classList.remove("rightactive");
            }
            offsetTop = main.children[i - 3].offsetTop;
          }
        }
      });
    </script>
  </body>
</html>
